<template>
  <div class="home">
    <div class="top-header">
      <h1 class="main-title">欢迎来到球员管理系统</h1>
      <img src="../images/wz14.png" alt="图片" class="header-image" style="width: 1200px;height: 300px;" />
    </div>
    <h2 class="page-title">最新消息</h2>
    <div class="dashboard">
      <!-- 公告模块 -->
      <div class="announcements">
        <h2><img src="../images/最新公告.png" alt="最新公告图标" class="icon" /> 最新公告</h2>
        <ul>
          <li v-for="announcement in announcements" :key="announcement.id">
            {{ announcement.title }}
          </li>
        </ul>
      </div>

      <!-- 资讯模块 -->
      <div class="news">
        <h2><img src="../images/最新资讯.png" alt="最新资讯图标" class="icon" /> 最新资讯</h2>
        <ul>
          <li v-for="news in newsArticles" :key="news.id">
            {{ news.newsName }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      announcements: [],
      newsArticles: [],
    };
  },
  mounted() {
    this.getLatestAnnouncements();
    this.getLatestNews();
  },
  methods: {
    getLatestAnnouncements() {
      axios.get('http://localhost:8080/announcement/latest')
          .then(response => {
            this.announcements = response.data; // 假设后端返回的数据格式直接是数组，不需要再使用 response.data.data
          })
          .catch(error => {
            console.error('Error fetching latest announcements', error);
          });
    },
    getLatestNews() {
      axios.get('http://localhost:8080/news/latest')
          .then(response => {
            this.newsArticles = response.data; // 假设后端返回的数据格式直接是数组，不需要再使用 response.data.data
          })
          .catch(error => {
            console.error('Error fetching latest news', error);
          });
    },
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  padding: 20px;
}

.top-header {
  margin-bottom: 20px;
}

.main-title {
  font-size: 32px;
}

.page-title {
  font-size: 24px;
  margin-top: 10px;
  text-align: center;
}

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.announcements, .news {
  background: #f2f2f2;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

ul {
  padding-left: 20px;
}
</style>